<template>
    <h1>onRenderTracked, onRenderTriggered</h1>
    <h1>{{ data.name }}</h1>
    <button @click="handleChange">更新</button>
    <hr>
    
</template>

<script setup>
import { ref, onRenderTracked, onRenderTriggered } from 'vue'
const data = ref({name:'李雷'})
const handleChange = () => {
    data.value.name = '韩梅梅'
};

//页面初次渲染的时候跟踪虚拟dom以及该操作的目标对象和键
onRenderTracked((debugge) => {
    console.log('onrenderTracked')
    console.log(debugge, 'debugger')
})


//跟踪了虚拟dom重新渲染的时候以及该操作的目标对象和键
onRenderTriggered((debugge) => {
    console.log('onRenderTriggered ')
    console.log(debugge, 'debugger')
})
</script>

<style>

</style>